<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import {
  Sparkle,
  Tag,
  Paintbrush,
  Blocks,
  ClipboardPaste,
  FileLock2,
  UserPlus,
  Workflow,
  History,
  Store,
  Link,
  LineChart,
  Boxes,
  Wallet,
} from "lucide-vue-next";

interface BenefitsProps {
  icon: string;
  title: string;
  description: string;
}

const benefitList: BenefitsProps[] = [
  {
    icon: "clipboardPaste",
    title: "应用迁移",
    description:
      "快速/完整的在两个或多个账号间进行迁移,无需手动处理元素库.原样迁移,保证应用的完整和可用.",
  },
  {
    icon: "userPlus",
    title: "账号管理",
    description:
      "可同时添加多个账号,方便应用迁移/备份/上传时切换账号.",
  },
  {
    icon: "link",
    title: "从链接复制",
    description:
      "用来复制别人分享出来的应用,只需要一个应用的分享链接就可以将应用复制成功,也就是'我获取的应用'.无视社区版限制,无视30行代码限制(企业分享的应用不行).",
  },
  {
    icon: "store",
    title: "应用市场复制",
    description:
      "用户可通过邀请链接加入别人创建的应用市场,之后就能复制市场内的应用",
  },
  {
    icon: "workflow",
    title: "内部依赖",
    description:
      "有时拷贝后会应用里只使用了一行代码依赖了别的指令,会导致应用不能编辑/查看.可用此方法获取对应的指令.",
  },
  {
    icon: "fileLock2",
    title: "应用加密",
    description:
      "隐藏应用代码或打乱代码,防止别人使用时查看到源码",
  },
  {
    icon: "boxes",
    title: "批量更新",
    description:
      "为多个子账号绑定同一个应用的分享链接,源应用更新后子账号可同时获取新版本.不限制账号版本",
  },
  {
    icon: "history",
    title: "应用备份",
    description:
      "下载应用备份文件,需要时可重新恢复.防止应用意外丢失",
  },
];

const iconMap: Record<
  string,
  | typeof Sparkle
  | typeof Tag
  | typeof Paintbrush
  | typeof Blocks
  | typeof LineChart
  | typeof ClipboardPaste
  | typeof Store
  | typeof FileLock2
  | typeof UserPlus
  | typeof Workflow
  | typeof History
  | typeof Link
> = {
  sparkle: Sparkle,
  tag: Tag,
  paintbrush: Paintbrush,
  blocks: Blocks,
  lineChart: LineChart,
  wallet: Wallet,
  clipboardPaste: ClipboardPaste,
  store: Store,
  fileLock2: FileLock2,
  userPlus: UserPlus,
  workflow: Workflow,
  history: History,
  boxes: Boxes,
  link: Link,
};
</script>

<template>
  <section
    id="benefits"
    class="container py-24 sm:py-32"
  >
    <div class="grid lg:grid-cols-2 place-items-center lg:gap-24">
      <div>
        <h2 class="text-lg text-primary mb-2 tracking-wider">功能一览</h2>

        <h2 class="text-3xl md:text-4xl font-bold mb-4">
          它能做什么?
        </h2>
        <p class="text-xl text-muted-foreground mb-8">
          方便,稳定的从两个账号互相复制,不用担心元素库和代码~快速的为客户部署应用~加密你自己的程序.你想到的这里都能实现~
          欢迎提交新功能建议~
        </p>
      </div>

      <div class="grid lg:grid-cols-2 gap-4 w-full">
        <Card
          v-for="({ icon, title, description }, index) in benefitList"
          :key="title"
          class="bg-muted/50 dark:bg-card hover:bg-background dark:hover:bg-background transition-all delay-75 group/number"
        >
          <CardHeader>
            <div class="flex justify-between">
              <component
                class="size-8 mb-6 text-primary"
                :is="iconMap[icon]"
              />

              <span
                class="text-5xl text-muted-foreground/15 font-medium transition-all delay-75 group-hover/number:text-muted-foreground/30"
                >0{{ index + 1 }}</span
              >
            </div>

            <CardTitle>{{ title }}</CardTitle>
          </CardHeader>

          <CardContent class="text-muted-foreground">
            {{ description }}
          </CardContent>
        </Card>
      </div>
    </div>
  </section>
</template>
